﻿import ko = require("knockout");
import Editor = require("../../Editor");
import ClipVisualizer = EditoneLibRT.ClipVisualizer;
import Application = WinJS.Application;

class ClipTile {
    public constructor(params: {tile: ITile, editor: Editor, track: any}) {
        this.processing = ko.observable(true);
        this.style = { msGridRows: "1fr" };

        for (var ch = 1; ch < params.track.numChannels; ch++) {
            this.style.msGridRows += " 6px 1fr";
        }
        this.channelImages = ko.observableArray([]);

        var promise = this.promise = ClipVisualizer.getBase64PngArrayAsync(
            params.tile.clip,
            params.tile.start,
            params.tile.length,
            1 / params.editor.zoom(),
            params.track.height() / params.track.numChannels
        );

        params.tile.cancelCallback = promise.cancel;

        promise.done((channelImages) => {
            if (!channelImages) {
                return;
            }

            var ciData = [];
            for (var i = 0; i < channelImages.length; i++) {
                ciData[i] = { msGridRow: 1 + 2 * i, backgroundImage: "url('"+channelImages[i]+"')" };
            }
            this.channelImages(ciData);
            this.processing(false);
        });
    }

    public processing: KnockoutObservable<boolean>;
    public style: { msGridRows: string };
    public channelImages: KnockoutObservableArray<{src: string, style: string}>;
    start: number;
    end: number;
    promise;
}

export = ClipTile;